
//存储步进器
var currentDocument = null;
//步进计数
var currentInit = 0;

var timerSave = 1000;
var stopsave = 0;
var startdrag = 0;
var canvasContent = $(".canvasContent").html();
var currenteditor = null;
$(document).ready(function() {
    //初始化容器
    $("body").css("min-height", $(window).height() - 90);
    //初始化画布
    $(".canvasContent").css("min-height", $(window).height() - 160);
    var $currentlySelected = $(); // 用于存储当前选中的元素
    // $( "#canvasContent" ).selectable({
    //     // autoRefresh: false, // 不自动刷新选择状态
    //     selecting: function(event, ui) {
    //         // 当用户开始选择元素时
    //         // 移除之前选中元素的背景色
    //         $currentlySelected.css("background-color", "");
    //
    //         // 更新当前选中的元素
    //         $currentlySelected = $(ui.selecting);
    //
    //         // 立即给当前选择的元素添加背景色
    //         $currentlySelected.css("background-color", "#000");
    //     },
    //     unselecting: function(event, ui) {
    //         // 如果用户取消选择某个元素，可以在这里处理（如果需要的话）
    //         // 例如，恢复背景色到默认状态
    //         $(ui.unselecting).css("background-color", "");
    //     },
    // });
    // 当布局组件拖动时
    $(".lgiRow").draggable({
        revert: "invalid", // 如果不在有效的droppable上放下，则回弹
        revertDuration: 0, // 回弹动画的持续时间，设为0则立即回弹
        containment: ".canvasContent",
        //拖动时，克隆
        helper: "clone",
        //拖动组件的拖动把手
        handle: ".drag",
        //拖动到画布
        // connectToSortable: "",
        placeholder: "ui-state-highlight", // 可选的占位符样式
        start: function(e,t) {
            if (!startdrag) stopsave++;
            startdrag = 1;
        },
        drag: function(e, t) {
            //拖动时，克隆
            //这个虚拟组件宽400px
            t.helper.width(400)
        },
        stop: function(event, ui) {

            console.log(ui)
            // 复制原始元素（而不是 helper），并追加到 .canvasContent 中
            const $viewContent = $(this).find('.view').find('*');
            console.log(ui)
            // 如果 canvasContent 是有效的，则移动 canvasContent 到 canvasContent
            const canvasContent = $(".canvasContent");
            if (canvasContent.length) {
                let $clonedViewContent = $viewContent.clone(); // 克隆并显示 .view;
                if ($clonedViewContent.length){
                    $clonedViewContent.show()
                    //判断div名称是否为view-row
                    if($clonedViewContent[0].className.valueOf('view-div')){
                        console.log('view-div')
                        //把表格元素可作为容器
                        $(".view-div").sortable({
                            //选择页面上所有 .drag-view 类下的 .column 类的元素，并初始化它们为可排序的。
                            opacity: .35,//拖动时，透明度
                            connectToSortable: ".view-div",
                            placeholder : "ui-state-highlight",
                            start: function(e,ui) {
                                if (!startdrag) stopsave++;
                                startdrag = 1;
                                ui.helper.width(400);
                            },
                            drag: function(e, t) {
                                //拖动时，克隆
                            },
                            stop: function(e,t) {
                                if(stopsave>0) stopsave--;
                                startdrag = 0;

                            }
                        }).disableSelection();
                    }else{
                        //添加拖动
                        $clonedViewContent.draggable({
                            revert: "invalid", // 如果不在有效的droppable上放下，则回弹
                            revertDuration: 0, // 回弹动画的持续时间，设为0则立即回弹
                            connectToSortable: "",
                            placeholder : "ui-state-highlight",
                            start: function(e,t) {
                                if (!startdrag) stopsave++;
                                startdrag = 1;
                                ui.helper.width(400);
                            },
                            drag: function(e, t) {
                                //拖动时，克隆
                            },
                            stop: function(e,t) {
                                if(stopsave>0) stopsave--;
                                startdrag = 0;

                            }
                        })
                    }
                }
                $clonedViewContent.appendTo(canvasContent); // 将克隆的元素添加到放置区域
            }

            if(stopsave>0) stopsave--;
            startdrag = 0;
        }
    });

    // $(".canvasContent").droppable({
    //     stop: function( event, ui ) {
    //         console.log(event)
    //         console.log(ui)
    //
    //         ui.offset.left = $(".canvasContent").offset().left
    //         ui.offset.top = $(".canvasContent").offset().top
    //     }
    // });
    //初始化容器
    initContainer()
    //定时存储布局
    setInterval(function() {
        handleSaveLayout()
    }, timerSave)
})


//给元素都加上拖动
function initContainer(){
    //绑定元素拖动
    $(".canvasContent ,.view-col").sortable({
        opacity: .35,
        connectWith: ".view-div",
        placeholder : "ui-state-highlight",
        start: function(e,ui) {
            if (!startdrag) stopsave++;
            startdrag = 1;
            ui.helper.width(400);
            // 当开始拖动时，可以取消selectable的选择状态
            // $("#canvasContent").selectable("unselect", ui);
        },
        stop: function(e,t) {
            if(stopsave>0) stopsave--;
            startdrag = 0;

        },
        receive: function(event, ui) {
            $(this).sortable('cancel'); // 取消这次移动
        }
    }).disableSelection();

}

//布局历史
var layouthistory;
//是否支持存储，这个是用来保存每一步的
function supportstorage() {
    return typeof window.localStorage == 'object';
}
//句柄保存布局
function handleSaveLayout() {
    //获取画布div
    const e = $(".canvasContent").html();
    //如果没有保存，并且当前布局和保存的布局不同
    if (!stopsave && e !== window.canvasContent) {
        console.log("布局已保存")
        //e != window.drag-viewHtml：当前从.drag-view元素中获取的HTML内容（存储在e中）必须与存储在window.drag-viewHtml中的HTML内容不同。
        //更新状态和变量：
        stopsave++;
        window.canvasContent = e;
        //console.log("保存布局到本地-->"+e)
        saveLayout();
        stopsave--;
    }
}
//保存布局
function saveLayout(){
    //获取布局历史
    let data = layouthistory;
    //如果没有历史，则创建一个空的对象
    if (!data) {
        data={};
        data.count = 0;
        data.list = [];
    }
    //删除多余的历史
    if (data.list.length>data.count) {
        for (let i=data.count;i<data.list.length;i++)
            data.list[i]=null;
    }
    //将当前布局添加到历史列表中
    data.list[data.count] = window.canvasContent;
    //更新历史计数
    data.count++;
    //是否可以保存数据到本地，如果可以，则保存到本地
    if (supportstorage()) {
        //console.log("保存布局到本地-->"+JSON.stringify(data));
        localStorage.setItem("layoutdata",JSON.stringify(data));
    }
    //更新全局变量
    layouthistory = data;
}
//恢复布局
function redoLayout() {
    const data = layouthistory;
    if (data) {
        if (data.list[data.count]) {
            window.canvasContent = data.list[data.count];
            data.count++;
            $('.canvasContent').html(window.canvasContent);
            if (supportstorage()) {
                localStorage.setItem("layoutdata",JSON.stringify(data));
            }
            return true;
        }
    }
    return false;
}

//撤销布局
function undoLayout() {
    const data = layouthistory;
    // console.log(data);
    if (data) {
        //更新当前历史计数
        window.canvasContent = data.list[data.count-2];
        data.count--;
        $('.canvasContent').html(window.canvasContent);
        if (supportstorage()) {
            localStorage.setItem("layoutdata",JSON.stringify(data));
        }
        return true;
    }
    return false;
}
